<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
<script type="text/javascript">
    let person = {
        name:'张三',
        age:18
    }

//region 模拟vue2中的响应式
/*let p = {};
Object.defineProperty(p, 'name', {
    configurable: true,
    get() {
        return p.name;
    },
    set(value) {
        console.log(`更新界面：p.name`);
        p.name = value;
    }
});
Object.defineProperty(p, 'age', {
    get() {
        return p.name;
    },
    set(value) {
        console.log(`更新界面：p.age`);
        p.name = value;
    }
});*/
//endregion

    //region 模拟Vue3中的响应式
    let p = new Proxy(person,{
        get(target, propName){
            console.log(`读取p.${propName}`);
            return Reflect.get(target, propName);
        },
        set(target, propName, value){
            console.log(`写入p.${propName}`);
            Reflect.set(target, propName, value);
        },
        deleteProperty(target, propName) {
            return Reflect.deleteProperty(target, propName);
        },
    });
    //endregion

    // region Reflect.defineProperty
    let obj = {a: 1, b: 2};
    /*Object.defineProperty(obj, 'c', {
        get() {
            return 3;
        },
    });
    Object.defineProperty(obj, 'c', {
        get() {
            return 4;
        },
    });*/ // Uncaught TypeError: Cannot redefine property: c
    let res1 = Reflect.defineProperty(obj, 'c', {
        get() {
            return 3;
        },
    });
    let res2 = Reflect.defineProperty(obj, 'c', {
        get() {
            return 4;
        },
    });

    console.log(res1); // true
    console.log(res2); // false
    // endregion
</script>
</html>